<template>
    <Card>
        <JG-search :searchData="searchData" @on-input-searcha="askDatasearcha" @on-input-searchb="askDatasearchb" @on-change-searcha="askDatasearchas" @on-change-searchb="askDatasearchbs" @on-change-change="askDatas"  @click="clickupload"/>
        <JG-table :loading="loading" :total="total" :columns="columns" :params="params" :data="data" @askData="askData"></JG-table>
    </Card>
</template>
<script>
    import { workindexchannellist, workindex, workindexexportworks } from '@api/daycount';
    import util from '@/libs/util';
    export default {
        name: '',
        data () {
            return {
                searchData: {
                    left: [
                        { id: 1, key: 'Input', value: '', clearable: true, placeholder: '请输入姓名', callback: 'searcha' },
                        { id: 2, key: 'Input', value: '', clearable: true, placeholder: '请输入文章标题', callback: 'searchb' },
                        { id: 3, key: 'DatePicker', type: 'daterange', value: [new Date(), new Date()], clearable: true, placeholder: '请选择日期', callback: 'change' },
                        { id: 4, key: 'Select', value: '',style: { width: '280px' }, clearable: true, placeholder: '请选择发布渠道', childList: [], callback: 'change',filterable:true,},
                        { id: 5, key: 'Button', value: '导出', has: { name: '-v1-work-index-export-works', flag: '/v1/work/index/export-works' } }
                    ]
                },
                loading: false,
                total: 0,
                columns: [
                    { title: '发布人', key: 'uname', width: 120 },
                    { title: '日期', key: 'created_at', width: 180 },
                    { title: '渠道', key: 'web_host', width: 240 },
                    { title: '文章标题', slot: 'daycountTitle', minWidth: 200 },
                    // { title: '文章标题', key: 'title', minWidth: 200, tooltip: true },
                    { title: '文章字数', key: 'body_length', width: 100 },
                    { title: '文章标题密度', key: 'title_show_num', width: 120 }
                ],
                params: { user_name: '', title: '', start_time: '', end_time: '', channel: '', page: 1, pageSize: 10 },
                data: []
            }
        },
        mounted () {
            workindexchannellist().then(res => {
                this.searchData.left.forEach((item) => {
                    if (item.id === 4) {
                        item.childList = res.web_host;
                    }
                });
            })
            this.initial()
        },
        methods: {
            initial () {
                this.askData()
            },
            askDatas () {
                this.params.page = 1
                this.askData()
            },
            askDatasearchas () {
                this.searchData.left.forEach((item) => {
                    if (item.id === 1) {
                        item.value = ((item.value.replace(/(^\s*)|(\s*$)/g, '')).replace(/(^\http:\/\/*)|(\/*$)/g, '')).replace(/(^\https:\/\/*)|(\/*$)/g, '')
                    }
                    this.askDatasearcha()
                });
            },
            askDatasearchbs () {
                this.searchData.left.forEach((item) => {
                    if (item.id === 2) {
                        item.value = ((item.value.replace(/(^\s*)|(\s*$)/g, '')).replace(/(^\http:\/\/*)|(\/*$)/g, '')).replace(/(^\https:\/\/*)|(\/*$)/g, '')
                    }
                    this.askDatasearchb()
                });
            },
            askData () {
                this.searchdata()
                this.loading = true
                workindex(this.params).then(res => {
                    this.data = res.data
                    this.total = res.count
                    this.loading = false
                }).catch(() => {
                    this.loading = false;
                });
            },
            askDatasearcha () {
                this.params.page = 1
                this.searchData.left.forEach((item) => {
                    if (item.id === 2) {
                        item.value = '';
                    } else if (item.id === 3) {
                        item.value = [];
                    } else if (item.id === 4) {
                        item.value = '';
                    }
                });
                this.askData()
            },
            askDatasearchb () {
                this.params.page = 1
                this.searchData.left.forEach((item) => {
                    if (item.id === 1) {
                        item.value = '';
                    } else if (item.id === 3) {
                        item.value = [];
                    } else if (item.id === 4) {
                        item.value = '';
                    }
                });
                this.askData()
            },
            searchdata () {
                this.searchData.left.forEach((item) => {
                    if (item.id === 1) {
                        this.params.user_name = item.value;
                    } else if (item.id === 2) {
                        this.params.title = item.value;
                    } else if (item.id === 3) {
                        this.params.start_time = item.value[0] ? this.$Date(item.value[0]).format('YYYY-MM-DD') : '';
                        this.params.end_time = item.value[1] ? this.$Date(item.value[1]).format('YYYY-MM-DD') : '';
                    } else if (item.id === 4) {
                        this.params.channel = item.value;
                    }
                });
            },
            clickupload () {
                let url = `${process.env.VUE_APP_API}/v1/work/index/export-works?`
                let urls = `project_id=${util.storage.get('currentProject')}&user_name=${this.params.user_name ? this.params.user_name : ''}&title=${this.params.title ? this.params.title : ''}&start_time=${this.params.start_time ? this.params.start_time : ''}&end_time=${this.params.end_time ? this.params.end_time : ''}&channel=${this.params.channel ? this.params.channel : ''}`
                // console.log(`${url}${urls}`)
                window.open(`${url}${urls}`)
            }
        }
    }
</script>
